<template>
  <div class="kefuBox">

    <div class="con_mess">
      <div v-if="showNameAnmition" :class="['mess_name', showNameAnmition? 'nameAnmition': '']">hi,小雨同学</div>
      <!--        <anim-word :text="letters" @poof="rem"></anim-word>-->
      <div v-if="showInfoAnmition" :class="['mess_info', showInfoAnmition? 'infoAnmition' : '']"> {{letters}} </div>
    </div>
    <div class="con_guide"></div>
  </div>
</template>

<script>
import AnimWord from '../animWord'

export default {
  components: {AnimWord},
  props: ['letters'],
  data() {
    return {
      // 是否显示名字渐现动画
      showNameAnmition: false,
      // 是否显示提示内容
      showInfoAnmition: false,
      // 显示隐藏文字定时器
      anmitionTime: null
    }
  },
  created() {
    console.log(this.letters)
  },
  mounted() {
    this.renderAnimation()
  },
  beforeDestroy() {
    // 组件卸载清除定时器
    clearInterval(this.anmitionTime)
  },
  methods: {
    renderAnimation(){
      let n = 0;
      clearInterval(this.anmitionTime)
      this.anmitionTime = setInterval(() => {
        n += 0.5;
        if(n === 1){
          this.showNameAnmition = true
        }
        if(n === 2){
          this.showInfoAnmition = true
        }
      },500)
    },
    rem(letter) {
      this.letters = this.letters.map(function (item) {
        if (item.char === letter) {
          item.alive = false;
        }
        return item;
      });
    },
    goNext() {
      if (this.type == 2) {
		 this.$router.push({'path':'/lessonShow',query:{ class: 2}})
        // this.$emit("showloading", {
        //   methods: 'push',
        //   path: '/lessonShow',
        //   query: {
        //     class: 2
        //   }
        // })
      } else {
		  this.$router.push({'path':'/lessTopic',query:{ class: 1}})
        // this.$emit("showloading", {
        //   methods: 'push',
        //   path: '/lessTopic',
        //   query: {
        //     class: 1
        //   }
        // })
      }
    }
  }
}
</script>
<style lang="less" scoped>
.kefuBox {
  width: 100%;
  height: 100%;

  .con_mess {
    box-sizing: border-box;
    padding: 0.2rem;
    width: 100%;
    height: 1.58rem;
    font-size: 0.16rem;
    background: url("../../assets/image/lesson/mess.png");
    background-size: 100% 100%;
  }

  .con_guide {
    width: 2.06rem;
    height: 2.24rem;
    margin: 0 auto;
    background: url("../../assets/image/lesson/guide.gif");
    background-size: 100% 100%;
    box-sizing: border-box;
  }
}
// 动画
.nameAnmition{
  animation: showName 1.5s;
}
.infoAnmition{
  animation: showInfo 1.5s;
}
@keyframes showName {
  0% {
    margin-top: 0.2rem;
    opacity: 0;
  }
  100% {
    margin-top: 0;
    opacity: 1;
  }
}
@keyframes showInfo {
  0% {
    margin-top: 0.2rem;
    opacity: 0;
  }
  100% {
    margin-top: 0;
    opacity: 1;
  }
}
</style>
